<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <link href="${base}/resources/css/main.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="${base}/resources/js/lib/jquery.1.11.3.min.js"></script>
 <script type="text/javascript" src="${base}/resources/js/main.js"></script>
 <script type="text/javascript" src="${base}/resources/js/jquery.form.js"></script>
</head>
<body>

<div style="width: 800px;">
    <form id="upload" action="" method="post" enctype="multipart/form-data">

        <input  type='file' id="identity"  onchange='getImg(this)' name='identity' accept='image/*' multiple='multiple' >
    <label id ="identityLabel">
        <img src="" alt=""  style="width: 300px;height: 300px;">
    </label>

        <input  type='file' id="video"  onchange='getVideo(this)' name='video' accept='video/*' multiple='multiple' >
       <label id="videoLabel">
        <video   src="/i/movie.ogg" controls="controls" style="width: 300px;height: 300px;">

        </video>
       </label>
        <div style="width: 800px;height: 50px;">||</div>
        <input type="file"  name="changeImg" id="changeImg" accept="image/*;video/*"  onchange="imgchange()">

        <button type='button' id="saveBtn" onclick="saveForm()">保存资料</button>
    </form>

</div>
<script>


    function saveForm() {
        $("#upload").attr("action", "${base}/upload");
        $("#upload").submit();
    }
    function  imgchange(){

        $("#upload").ajaxSubmit({
            url :"${base}/upload",
            type:"post",
            success:function(data){
                alert(data.path);
            }
        });
    }

    function getImg(obj){
        var fileId = $(obj).attr("id");
        var labelId = fileId+"Label";
        var reader = new FileReader();
        reader.readAsDataURL(obj.files[0]);
        reader.onload = function(){
            $('#'+labelId).html("<img style='width: 300px;height: 300px;' src='"+this.result+"'>");
        };
    };
    function getVideo(obj){
        var fileId = $(obj).attr("id");
        var labelId = fileId+"Label";
        var reader = new FileReader();
        reader.readAsDataURL(obj.files[0]);
        reader.onload = function(){
            $('#'+labelId).html("<video style='width: 300px;height: 300px;' controls='controls' src='"+this.result+"'></video>");
        };
    };
</script>
</body>
</html>